antd 时间组件显示设置中文 |
您所在的位置：网站首页 › vue antd 登录 › antd 时间组件显示设置中文 |
|
antd DatePicker 默认显示为英文 即en-US
切换local 给出的api 为 locale 里面可以传递一个对象
{
"lang": {
"locale": "en_US",
"placeholder": "Select date",
"rangePlaceholder": ["Start date", "End date"],
"today": "Today",
"now": "Now",
"backToToday": "Back to today",
"ok": "OK",
"clear": "Clear",
"month": "Month",
"year": "Year",
"timeSelect": "Select time",
"dateSelect": "Select date",
"monthSelect": "Choose a month",
"yearSelect": "Choose a year",
"decadeSelect": "Choose a decade",
"yearFormat": "YYYY",
"dateFormat": "M/D/YYYY",
"dayFormat": "D",
"dateTimeFormat": "M/D/YYYY HH:mm:ss",
"monthFormat": "MMMM",
"monthBeforeYear": true,
"previousMonth": "Previous month (PageUp)",
"nextMonth": "Next month (PageDown)",
"previousYear": "Last year (Control + left)",
"nextYear": "Next year (Control + right)",
"previousDecade": "Last decade",
"nextDecade": "Next decade",
"previousCentury": "Last century",
"nextCentury": "Next century",
"shortWeekDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"shortMonths": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"timePickerLocale": {
"placeholder": "Select time"
},
"dateFormat": "YYYY-MM-DD",
"dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
"weekFormat": "YYYY-wo",
"monthFormat": "YYYY-MM"
}
如果需要个性化或者单独修改可以更改里面的部分属性 但这个是只能影响到当前插件。 若后来者需要调整很难单独处理，写个工具函数吧！ 方法一 import zhCN from 'antd/lib/locale/zh_CN' const ZhCNLocale: typeof zhCN = zhCN; ZhCNLocale.DatePicker!.lang = { ...zhCN.DatePicker!.lang, monthFormat: 'M月', shortWeekDays: ['日', '一', '二', '三', '四', '五', '六'] } //将locale 注入方法二 import 'dayjs/locale/zh-cn'; import locale from 'antd/es/date-picker/locale/zh_CN'; ;OK 只要引入ZhCNLocale.DatePicker 都会得到一个中文但并不够，此时全局还是英文的 修改全局方案 // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; import locale from 'antd/locale/zh_CN'; ;但此处设置完成依然可能不生效，如果项目引入的dayjs 版本与antd 引入版本不一致 要先处理版本 不同实例也会导致失效。 踩坑路上的一个小坑 填了 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |